import React from 'react';
import {Spin, Card, Modal, Table, Row, Col} from 'antd';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import PropTypes from 'prop-types';
import {claimStatus, repairType} from '../Enum';
import routes from './routes';
import {TABLE, DATE_FORMAT} from '../constants';
import {conventEnumValueToString, formatDateTime, formatAmount} from '../utils';
import {getApplyDetail} from './api';
import {injectIntl} from './intl';
const {Description} = DescriptionList;
class ApplyHistoryDetailPanel extends React.PureComponent {
    state = {
        isFetching: false,
        data: {},
        details: [],
        claimWorkItemDetails: [],
        claimResultDetails: [],
        claimMaterialDetails: [],
    }
    componentDidMount() {
        this.getDetailInfo();
    }
    getDetailInfo = () => {
        const id = this.props.id;
        this.setState({isFetching: true});
        getApplyDetail(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        isFetching: false,
                        data: res.data,
                        details: res.data.details,
                        claimWorkItemDetails: res.data.claimWorkItemDetails,
                        claimResultDetails: res.data.claimResultDetails,
                        claimMaterialDetails: res.data.claimMaterialDetails
                    });
                else
                    this.setState(({
                        isFetching: false
                    }));
            });
    }
    onCancel = () => {
        this.props.history.push(routes.query.url());
    }
    render() {
        const {data, details, claimWorkItemDetails, claimMaterialDetails} = this.state;
        const {formatMessage} = this.props.intl;
        const columnMaterials = [
            {
                title: formatMessage({
                    id: 'applyHistoryDetailPanel.materialTablePanel.usedPartCode',
                    defaultMessage: '旧件编号'
                }),
                dataIndex: 'usedPartCode'
            },
            {
                title: formatMessage({
                    id: 'applyHistoryDetailPanel.materialTablePanel.usedPartName',
                    defaultMessage: '旧件名称'
                }),
                dataIndex: 'usedPartName'
            },
            {
                title: formatMessage({
                    id: 'applyHistoryDetailPanel.materialTablePanel.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity'
            },
            {
                title: formatMessage({
                    id: 'applyHistoryDetailPanel.materialTablePanel.price',
                    defaultMessage: '索赔价'
                }),
                dataIndex: 'price'
            }
        ];
        const columnWorkItems = [
            {
                title: formatMessage({
                    id: 'applyHistoryDetailPanel.workItemDetailPanel.workItemCode',
                    defaultMessage: '维修项目编号'
                }),
                dataIndex: 'workItemCode'
            },
            {
                title: formatMessage({
                    id: 'applyHistoryDetailPanel.workItemDetailPanel.workItemName',
                    defaultMessage: '维修项目名称'
                }),
                dataIndex: 'workItemName'
            },
            {
                title: formatMessage({
                    id: 'applyHistoryDetailPanel.workItemDetailPanel.laborHour',
                    defaultMessage: '工时'
                }),
                dataIndex: 'laborHour'
            },
            {
                title: formatMessage({
                    id: 'applyHistoryDetailPanel.workItemDetailPanel.laborPrice',
                    defaultMessage: '工时单价'
                }),
                dataIndex: 'laborPrice',
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'applyHistoryDetailPanel.workItemDetailPanel.laborFee',
                    defaultMessage: '工时费'
                }),
                dataIndex: 'laborFee',
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'applyHistoryDetailPanel.workItemDetailPanel.remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark'
            }
        ];
        const colums = [{
            title: formatMessage({
                id: 'applyHistoryDetailPanel.usedPartCode',
                defaultMessage: '旧件编号'
            }),
            dataIndex: 'usedPartCode'
        },
        {
            title: formatMessage({
                id: 'applyHistoryDetailPanel.usedPartName',
                defaultMessage: '旧件名称'
            }),
            dataIndex: 'usedPartName'
        },
        {
            title: formatMessage({
                id: 'applyHistoryDetailPanel.quantity',
                defaultMessage: '数量'
            }),
            dataIndex: 'quantity'
        },
        {
            title: formatMessage({
                id: 'applyHistoryDetailPanel.price',
                defaultMessage: '索赔价'
            }),
            dataIndex: 'price',
            render: text => formatAmount(text)
        }];
        return (
            <Modal
                title={formatMessage({
                    id: 'applyHistoryDetailPanel.show.detail',
                    defaultMessage: '索赔单详情'
                })}
                width="60%"
                maskClosable={false}
                footer={null}
                destroyOnClose={true}
                visible={true}
                onCancel={this.props.onCancel}>
                <Spin spinning={this.state.isFetching}>
                    <Card>
                        <DescriptionList title={<Row><Col span={6}>{
                            formatMessage({
                                id: 'applyHistoryDetailPanel.card.common',
                                defaultMessage: '订单信息'
                            })
                        }</Col></Row>}>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.code',
                                defaultMessage: '索赔预申请单编号'
                            })}>{data.code}
                            </Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.repairCode',
                                defaultMessage: '委托书编号'
                            })}>{data.repairCode}
                            </Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.causePartCode',
                                defaultMessage: '主损件编号'
                            })}>{data.causePartCode}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.causePartName',
                                defaultMessage: '主损件名称'
                            })}>{data.causePartName}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.vin',
                                defaultMessage: 'VIN'
                            })}>{data.vin}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.status',
                                defaultMessage: '状态'
                            })}>{conventEnumValueToString(claimStatus, data.status)}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.repairType',
                                defaultMessage: '索赔类型'
                            })}>{conventEnumValueToString(repairType, data.repairType)}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.productionDate',
                                defaultMessage: '生产日期'
                            })}>{formatDateTime(data.productionDate, DATE_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.saleDate',
                                defaultMessage: '实销日期'
                            })}>{formatDateTime(data.saleDate, DATE_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.engineCode',
                                defaultMessage: '发动机号'
                            })}>{data.engineCode}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.customerName',
                                defaultMessage: '客户姓名'
                            })}>{data.customerName}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.cellPhoneNumber',
                                defaultMessage: '客户电话'
                            })}>{data.cellPhoneNumber}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.contactName',
                                defaultMessage: '送修人姓名'
                            })}>{data.contactName}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.contactNumber',
                                defaultMessage: '送修人电话'
                            })}>{data.contactNumber}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.totalFee',
                                defaultMessage: '费用合计'
                            })}>{data.totalFee}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.laborFee',
                                defaultMessage: '工时费'
                            })}>{formatAmount(data.laborFee)}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.materialFee',
                                defaultMessage: '材料费'
                            })}>{formatAmount(data.materialFee)}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.mgmtFee',
                                defaultMessage: '管理费'
                            })}>{formatAmount(data.mgmtFee)}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.assistantFee',
                                defaultMessage: '辅料费'
                            })}>{formatAmount(data.assistantFee)}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.createTime',
                                defaultMessage: '创建时间'
                            })}>{formatDateTime(data.createTime, DATE_FORMAT)}</Description>
                            <Description term={formatMessage({
                                id: 'applyHistoryDetailPanel.operation.submitTime',
                                defaultMessage: '提交时间'
                            })}>{formatDateTime(data.submitTime, DATE_FORMAT)}</Description>
                        </DescriptionList>
                    </Card>
                    <Card>
                        <DescriptionList title={formatMessage({
                            id: 'applyHistoryDetailPanel.table.claimMaterialDetails',
                            defaultMessage: '材料清单'
                        })}>
                            <Table
                                className="white-space-nowrap"
                                columns={columnMaterials}
                                rowKey="usedPartId"
                                pagination={false}
                                dataSource={claimMaterialDetails}
                                {...TABLE} />
                        </DescriptionList>
                    </Card>
                    <Card>
                        <DescriptionList title={formatMessage({
                            id: 'applyHistoryDetailPanel.table.claimWorkItemDetails',
                            defaultMessage: '项目清单'
                        })}>
                            <Table
                                className="white-space-nowrap"
                                columns={columnWorkItems}
                                rowKey="workItemCode"
                                pagination={false}
                                dataSource={claimWorkItemDetails}
                                {...TABLE} />
                        </DescriptionList>
                    </Card>
                    <Card>
                        <DescriptionList title={formatMessage({
                            id: 'applyHistoryDetailPanel.table.details',
                            defaultMessage: '辅料清单'
                        })}>
                            <Table
                                className="white-space-nowrap"
                                columns={colums}
                                rowKey="usedPartId"
                                pagination={false}
                                dataSource={details}
                                {...TABLE} />
                        </DescriptionList>
                    </Card>
                </Spin>
            </Modal>
        );
    }
}

ApplyHistoryDetailPanel.propTypes = {
    history: PropTypes.object,
    id: PropTypes.string,
    intl: PropTypes.object
};

export default injectIntl(ApplyHistoryDetailPanel);
